<!-- 抽屉分组 -->
<template>
    <el-button
        v-if="isAdd"
        type="primary"
        size="large"
        class="add-btn"
        @click="onAddItem"
    >
        {{ addText }}
    </el-button>

    <el-collapse
        v-model="activeKey"
        :accordion="accordion"
        class="row-content-collapse"
        @change="onActiveKeyChange"
    >
        <draggable
            v-model="list"
            :group="groupName"
            :animation="200"
            item-key="itemKey"
            handle=".el-collapse-item__header"
            filter=".no-draggable"
        >
            <template #item="{ element, index }">
                <el-collapse-item
                    :name="`${index}`"
                    :class="{
                        'draggable-handle': showDraggableBtn(element, index),
                        'no-draggable': !showDraggableBtn(element, index)
                    }"
                >
                    <template #title>
                        <div class="header-wrap">
                            <div :title="nodeTitle?.(element, index) || ''" class="left-wrap">
                                {{ nodeTitle?.(element, index) || '' }}
                            </div>
                            <div class="right-wrap">
                                <slot name="right" v-bind="{ element, index, buttonClass: 'btn-icon' }"></slot>
                                <el-icon v-if="showDeleteBtn(element, index)" title="删除" class="btn-icon" @click.stop="onDeleteItem(index)"><icon-delete /></el-icon>
                                <el-icon v-if="showDraggableBtn(element, index)" title="拖动排序" class="btn-icon"><icon-sort /></el-icon>
                            </div>
                        </div>
                    </template>
                    
                    <slot name="item" v-bind="{ element, index }"></slot>
                </el-collapse-item>
            </template>
        </draggable>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import { randomStr } from '@/libs/tools'
export default defineComponent({
    name: 'SiCollapseGroup',
    props: {
        // 分组列表数据
        modelValue: {
            type: Array,
            default: () => ([])
        },
        // 是否手风琴模式
        accordion: {
            type: Boolean,
            default: true
        },
        // 是否开启拖拽节点功能
        isDraggable: {
            type: [Boolean, Function],
            default: false
        },
        // 是否可添加
        isAdd: {
            type: Boolean,
            default: false
        },
        // 是否可删除
        isDelete: {
            type: [Boolean, Function],
            default: false
        },
        // 添加按钮文字，isAdd=true时有效
        addText: {
            type: String,
            default: '添加'
        },
        // 添加数据函数，isAdd=true时有效
        add: {
            type: Function
        },
        // 节点标题
        nodeTitle: {
            type: Function
        }
    },
    emits: [
        'update:modelValue',
        'add',
        'open'
    ],
    setup(props, { emit }) {
        const { modelValue, accordion, isDraggable, isAdd, isDelete, addText, add, nodeTitle } = toRefs(props)

        const groupName = `si-collapse-group-${randomStr()}`

        const activeKey = ref('0')

        const list = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })

        const setActiveKey = index => {
            activeKey.value = index.toString()
        }

        const showDraggableBtn = (data, index) => {
            if (typeof isDraggable.value === 'function') {
                return isDraggable.value(data, index)
            }
            return isDraggable.value
        }

        const showDeleteBtn = (data, index) => {
            if (typeof isDelete.value === 'function') {
                return isDelete.value(data, index)
            }
            return isDelete.value
        }

        const onAddItem = () => {
            const data = add.value?.(list.value)
            list.value.push(data)
            activeKey.value = `${list.value.length - 1}`
            onActiveKeyChange(activeKey.value)
        }

        const onDeleteItem = index => {
            list.value.splice(index, 1)
            activeKey.value = (parseInt(activeKey.value) > 0) ? `${parseInt(activeKey.value) - 1}` : '0'
            onActiveKeyChange(activeKey.value)
        }

        const onActiveKeyChange = val => {
            emit('open', val)
        }

        return {
            groupName,

            accordion,
            isAdd,
            addText,
            nodeTitle,

            activeKey,
            list,

            setActiveKey,
            showDraggableBtn,
            showDeleteBtn,
            onAddItem,
            onDeleteItem,
            onActiveKeyChange
        }
    }
})
</script>

<style lang="less" scoped>
@import './si-collapse-group.less';
</style>